import styled from '@emotion/styled';

export const TodoContainer = styled.div`
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
`;

export const TodoHeader = styled.header`
  text-align: center;
  margin-bottom: 20px;
  h1 {
    color: #2c3e50;
  }
`;

export const TodoInput = styled.input`
  width: 100%;
  padding: 12px;
  font-size: 16px;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-bottom: 20px;
`;

export const TodoList = styled.ul`
  list-style: none;
  padding: 0;
`;

export const TodoItem = styled.li`
  display: flex;
  align-items: center;
  padding: 12px;
  background: #fff;
  border: 1px solid #ddd;
  margin-bottom: 8px;
  border-radius: 4px;
  
  &:hover {
    background: #f5f5f5;
  }
`;

export const TodoCheckbox = styled.input`
  margin-right: 12px;
  width: 20px;
  height: 20px;
`;

export const TodoTitle = styled.span<{ completed: boolean }>`
  flex: 1;
  text-decoration: ${props => props.completed ? 'line-through' : 'none'};
  color: ${props => props.completed ? '#999' : '#2c3e50'};
`;

export const TodoButton = styled.button`
  padding: 6px 12px;
  background: #e74c3c;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  
  &:hover {
    background: #c0392b;
  }
`;

export const FilterContainer = styled.div`
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
`;

export const FilterButton = styled.button<{ active: boolean }>`
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  background: ${props => props.active ? '#3498db' : '#ecf0f1'};
  color: ${props => props.active ? '#fff' : '#2c3e50'};
  
  &:hover {
    background: ${props => props.active ? '#2980b9' : '#bdc3c7'};
  }
`; 